<template>
  <div class="friends-section">
    <div class="friends-header">
      <h3 class="friends-title">好友管理</h3>
      <div class="friends-actions">
        <button @click="goToFriends" class="friends-btn">
          <span class="btn-icon">👥</span>
          我的好友
        </button>
        <button @click="goToFriendRequests" class="requests-btn">
          <span class="btn-icon">📨</span>
          好友申请
          <span v-if="friendRequestCount > 0" class="request-badge">{{ friendRequestCount }}</span>
        </button>
        <button @click="showAddFriendDialog = true" class="add-friend-btn">
          <span class="btn-icon">➕</span>
          添加好友
        </button>
      </div>
    </div>
    
    <div v-if="friends.length > 0" class="friends-preview">
      <div class="friends-preview-header">
        <span>在线好友 ({{ onlineFriendsCount }})</span>
        <button @click="goToFriends" class="view-all-btn">查看全部</button>
      </div>
      <div class="friends-preview-list">
        <div v-for="friend in friends.slice(0, 3)" :key="friend.id" class="friend-preview-item">
          <div class="friend-avatar">
            <span class="avatar-text">{{ friend.friend_user_avatar || friend.friend_user_name?.charAt(0) || '默' }}</span>
            <div class="online-indicator" :class="{ 'online': friend.isOnline }"></div>
          </div>
          <div class="friend-info">
            <div class="friend-name">{{ friend.friend_user_name || '未知用户' }}</div>
            <div class="friend-status" :class="{ 'online': friend.isOnline }">
              {{ friend.isOnline ? '🟢 在线' : '⚪ 离线' }}
            </div>
          </div>
          <button @click="startChat(friend.friend_user_id)" class="chat-btn">
            <span class="btn-icon">💬</span>
          </button>
        </div>
      </div>
    </div>
    
    <div v-else class="friends-empty">
      <div class="empty-icon">👥</div>
      <div class="empty-text">暂无好友</div>
      <button @click="showAddFriendDialog = true" class="add-friend-btn">添加好友</button>
    </div>

    <!-- 添加好友弹窗 -->
    <div v-if="showAddFriendDialog" class="dialog-overlay" @click="showAddFriendDialog = false">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3 class="dialog-title">添加好友</h3>
          <button @click="showAddFriendDialog = false" class="close-icon">✕</button>
        </div>
        
        <div class="search-section">
          <div class="search-input-wrapper">
            <span class="search-icon">🔍</span>
            <input
              v-model="searchUsername"
              placeholder="输入用户名搜索"
              class="search-input"
              @keyup.enter="searchUser"
            >
          </div>
          <button @click="searchUser" class="search-btn">
            <span class="btn-icon">🔍</span>
            搜索
          </button>
        </div>

        <div v-if="searchResult" class="search-result">
          <div class="user-info">
            <div class="user-avatar">
              <span class="avatar-text">{{ searchResult.avatar || '默' }}</span>
            </div>
            <div class="user-details">
              <div class="user-name">{{ searchResult.username }}</div>
              <div class="user-id">ID: {{ searchResult.id }}</div>
            </div>
          </div>
          <button @click="sendFriendRequest(searchResult.id)" class="add-friend-btn">
            <span class="btn-icon">➕</span>
            添加好友
          </button>
        </div>

        <div v-else-if="searchUsername && !searchResult" class="no-result">
          <div class="no-result-icon">🔍</div>
          <div class="no-result-text">未找到相关用户</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  friends: {
    type: Array,
    default: () => []
  },
  friendRequestCount: {
    type: Number,
    default: 0
  }
});

const router = useRouter();
const showAddFriendDialog = ref(false);
const searchUsername = ref('');
const searchResult = ref(null);

const onlineFriendsCount = computed(() => {
  return props.friends.filter(friend => friend.isOnline).length;
});

const goToFriends = () => {
  router.push('/pages/friends/friends');
};

const goToFriendRequests = () => {
  router.push('/pages/friends/requests');
};

const startChat = (friendId) => {
  router.push(`/pages/chat/chat?friendId=${friendId}`);
};

const searchUser = async () => {
  // 实现搜索用户逻辑
};

const sendFriendRequest = async (userId) => {
  // 实现发送好友请求逻辑
};
</script>

<style scoped>
/* 好友管理区域样式 */
.friends-section {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.friends-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.friends-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.friends-actions {
  display: flex;
  gap: 10px;
}

.friends-btn, .requests-btn, .add-friend-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  border: none;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.friends-btn:hover, .requests-btn:hover, .add-friend-btn:hover {
  background-color: #e0e0e0;
}

.btn-icon {
  margin-right: 5px;
}

.request-badge {
  margin-left: 5px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* 好友预览样式 */
.friends-preview {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.friends-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.view-all-btn {
  background: none;
  border: none;
  color: #1890ff;
  font-size: 12px;
  cursor: pointer;
}

.friends-preview-list {
  display: flex;
  gap: 15px;
}

.friend-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background-color: #fafafa;
  flex: 1;
}

.friend-avatar {
  position: relative;
}

.avatar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  font-size: 16px;
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid #fafafa;
}

.online-indicator.online {
  background-color: #52c41a;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.friend-status {
  font-size: 12px;
  color: #999;
}

.friend-status.online {
  color: #52c41a;
}

.chat-btn {
  background: none;
  border: none;
  color: #1890ff;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
}

/* 空状态样式 */
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  border-top: 1px solid #f0f0f0;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.empty-text {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  padding: 20px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dialog-title {
  font-size: 16px;
  font-weight: bold;
}

.close-icon {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.search-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input {
  width: 100%;
  padding: 8px 10px 8px 35px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 0 15px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.user-id {
  font-size: 12px;
  color: #999;
}

.no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.no-result-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #ccc;
}

.no-result-text {
  font-size: 14px;
  color: #999;
}
</style>